<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>web10</title>
	<meta name="author" content="ch choongang" />
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script>
		$(function(){
			var t="<h5> h5 </h5>";
			$("button:first").click(function(){
				$(this).text(t);
			})
			$("button:eq(1)").click(function(){
				$(this).html(t);
			})
			//form의 내용을 가져올때 .val()
			$("button:eq(1)").text($(":text").val());
			//attribute getter .attr()
			$("button:first").text($("input:text").attr("name"));
			$("input:text").val(" kim kim ");
			$("input:text").attr("type","radio");
			
			//매니져야.음악틀어(a.mp3);
			//매니저야.음악끝나면(이거틀어,...어쩌고)
			//음악매니저.음악틀어크게(가요.mp3, 볼륨5, function())
			//주어.동사(목적)
			$("input").attr({"type":"checkbox",
				"name":"yourHobby",
				"value":"baseball"
			});
			// insert 앞에, 뒤
			$("body").append("<h3> append </h3>");
			$("body").prepend("<h3> prepend </h3>");
			$("<h3> appendTo </h3>").appendTo("body");
			$("<h3> prependTo </h3>").prependTo("body");
			$(":input").after(function(a,b,c){
				console.log("a",a);
				console.log("b",b);
				console.log("c",c);
				console.log("this",this);
				if(a==1) return "<hr>";

			});
			$("button").before(function(index){
				return "button : ";
			});
			// empty(); 로만 사
			$("button").empty(function(a,b){
				console.log("empty","a",a,"b",b);
			});	//비우는 것만
			//$("button").remove();	//완전제거 쓰레기통 치워버리기
			//filter, 속성 name이 존재하는 것만 없애라
			//$(":input").remove("[name]");
			$(":input").attr("type","text");
			bgcolor=	// rgb(r,g,b)
			$(":input:text").css("background-color");
			$(":input:text").val("배경색:"+bgcolor);
			mycolor = "rgb(50,200,70)";
			$(":input:text").css(
				"background-color", mycolor);
			var random=Math.random();	//0~1사이의 값
			random*=255;	//0.00~255.0 사이의 값
			random = Math.ceil(random);	//소수점 삭제
			console.log("random",random);
			randomColor="rgb(50,100,"+random+")";
			$(":input").css(
				"background-color",randomColor);
			console.log("클래스이름",
				$('#btn1').attr("class"));
			console.log("아이디 이름",
				$('#btn1').attr("id"));
			console.log("스타일내용",
				$(":text").attr("style"));
			$("div").click(function(){
				$(this).load("ajax.html");
				//서버 대 서버 통신에서만 ajax art이 성립됩니다.
				//서버 내 통신
				
			})				
		})
	</script>
		<script>
	function loadXMLDoc()
	{
	var xmlhttp;	//전역 변수 선언
	if (window.XMLHttpRequest)	//윈도우를 돌림
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  	// 최신 브라우저는 window.XMLHttpRequest이 존재
	  xmlhttp=new XMLHttpRequest();	//변수생성하여 오브젝트에 넣음
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  console.log("xmlhttp",xmlhttp);	//test
	  
	  // 야! 상태가 변하면 평선실행하라! 준비를 해두고
	  // 다섯단계
	  // 1. (서버가)요청을 받았다.
	  // 2. (서버가)요청을 처리하고 있다
	  // 3. (서버가)요청을 모두 처리했고 너는 받을 준비 해
	xmlhttp.onreadystatechange=function()
	  {
	  	console.log("xmlhttp.readyState",xmlhttp.readyState);
	  	// xmlhttp.status==200 (ok)
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	    }
	  }
	  //요청을 준비하고
	xmlhttp.open("GET","ajax.html",true);
	//요청 보내기
	xmlhttp.send();
	}
	</script>
</head>
<body>
	<p onclick="loadXMLDoc()"> javascript ajax 호출하기</p>
	<div id="myDiv"> empty div </div>
	<input type="text" name="yourName" value="kim"
		   style="background-color: yellow;
		   		 padding:4px;">
	<button id="btn1" class="btn1">버튼1</button><button>버튼2</button>
	
</body>
</html>

